<template>
	<view>
		<view class="container" v-if="isVisible">
			<uni-nav-bar dark :fixed="true" shadow background-color="red" status-bar left-icon="left" left-text="返回"
				title="我的推广" @clickLeft="goBack"></uni-nav-bar>
			<view class="main">
				<view class="li" v-for="(item,index) in PromotionData" :key="index">
					<view class="group">{{item.PromotionName}}</view>
					<view class="right">
						<view class="right_top">
							<view class="b">
								<view class="jia">地址：{{item.promoteLocation}}</view>
								<view class="jia" style="display: flex;">推广人数：<view class="mi">
										{{item.promotionCount}} 人 （{{item.promotionScope}}米）
									</view>
								</view>
							</view>
							<view class="tui" @tap="promotion(item.id)">
								再次推广

							</view>
						</view>
						<view class="zu jia">
							组建时间：{{formatYMD(item.isrtDt)}}
						</view>
					</view>
				</view>

			</view>
			<view class="apple" @tap="addPromotion()">
				+
			</view>
		</view>

		<tuiFoot></tuiFoot>

	</view>
</template>

<script>
	import tuiFoot from '@/components/red/foot.vue'
	import {
		GetPromotionList
	} from "@/api/promotion";
	export default {
		components: {
			tuiFoot
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				time: '10:00',
				spqtk: false,
				PromotionData: [],
				i: 0,
				isVisible: true,
				form: {
					datetimesingle: ''
				}
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			this.getPromotionListFunc();
		},
		methods: {
			addPromotion() {
				var promotionId = this.$store.state.user.PromotionId;
				if (promotionId != null) {
					uni.navigateTo({
						url: '/pages/red/add'
					})
				} else {
					uni.showToast({
						title: '您还不是推广者',
						icon: 'error'
					})
				}

			},
			formatYMD(date) {
				var dateShow = '';
				if (date != null || date != '') {
					var datetime = new Date(date);
					dateShow = this.formatDate(datetime, "yyyy年MM月dd日")
				}
				return dateShow;
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			bindTimeChange: function(e) {
				this.time = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate() + 1;

				if (type === 'start') {
					year = year;
				} else if (type === 'end') {
					year = year + 5;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			getPromotionListFunc() {
				var sdata = {
					"promotionUsersId": this.$store.state.user.PromotionId || 0,
					"openId": this.$store.state.user.openid,
				};
				GetPromotionList(sdata)
					.then(res => {
						if (res.data.length > 0) {
							var PromoteList = res.data;
							PromoteList = PromoteList.map(({
								...rest
							}, index) => {
								return {
									PromotionName: `第${index+1}组`,
									...rest
								};
							});
							this.PromotionData = PromoteList;

						}
						// return uni.showToast({
						// 	title: res.data.msg
						// });
					})
					.catch(res => {});
				// this.PromotionData = [{
				// 		"Id": 1,
				// 		"PromotionName": "第一组",
				// 		"PromotionAdress": "红旗连锁1（新济路）",
				// 		"PromotionPeopleCount": 100,
				// 		"PromotionRange": 200,
				// 		"CreaTime": "2025-01-25"

				// 	},
				// 	{
				// 		"Id": 2,
				// 		"PromotionName": "第二组",
				// 		"PromotionAdress": "红旗连锁2（新济路）",
				// 		"PromotionPeopleCount": 200,
				// 		"PromotionRange": 200,
				// 		"CreaTime": "2025-02-25"
				// 	},
				// 	{
				// 		"Id": 3,
				// 		"PromotionName": "第三组",
				// 		"PromotionAdress": "红旗连锁3（新济路）",
				// 		"PromotionPeopleCount": 300,
				// 		"PromotionRange": 300,
				// 		"CreaTime": "2025-03-25"
				// 	},
				// 	{
				// 		"Id": 4,
				// 		"PromotionName": "第四组",
				// 		"PromotionAdress": "红旗连锁4（新济路）",
				// 		"PromotionPeopleCount": 400,
				// 		"PromotionRange": 400,
				// 		"CreaTime": "2025-04-25"
				// 	}
				// ]

			},
			promotion(id) {
				// this.i = 1
				// this.isVisible = false				
				uni.navigateTo({
					url: '/pages/red/promotionAdd?id=' + id
				})
			},
			changeLog(e) {
				// this.single = e
				console.log('change事件:', this.form.datetimesingle);
			},
			release() {
				this.isVisible = true
				this.i = 0
			},
			goBack() {
				uni.navigateBack({
					delta: 1 // 返回上一页面
				});
			},
			cj(i) {
				this.i = i
			},
			canyu() {
				this.spqtk = !this.spqtk;
			},
			nato(url) {

				uni.navigateTo({
					url
				})
			},
			formatDate: function(date, fmt) {
				date.toLocaleString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
				if (/(y+)/.test(fmt)) {
					fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
				}
				let o = {
					'M+': date.getMonth() + 1,
					'd+': date.getDate(),
					'h+': date.getHours(),
					'm+': date.getMinutes(),
					's+': date.getSeconds()
				}
				for (let k in o) {
					if (new RegExp(`(${k})`).test(fmt)) {
						let str = o[k] + ''
						fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str))
					}
				}
				return fmt
			},
			padLeftZero: function(str) {
				return ('00' + str).substr(str.length)
			},
		}
	}
</script>

<style>
	.example-body {
		/* background-color: #fff; */
		/* padding: 33%; */
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* Full viewport height */
		z-index: 1001;
	}

	.san {
		width: 20upx;
		height: 30upx;
		position: absolute;
		left: 0;
	}

	.top {
		display: flex;
		width: 95%;
		margin: 0 auto;
		margin-top: 10%;
		position: relative;
		justify-content: center;
		align-items: center;
	}

	.title {
		text-align: center;
	}

	.main {
		width: 100%;
		margin: 0 auto;
		/* border: 1px solid #A5A5A5; */
		/* margin-top: 5%; */
		padding: 3%;
		border-radius: 15upx;
		flex: 1;
		overflow-y: auto;
		padding: 10px 5px;
		margin-bottom: 30%;
	}

	.apple {
		background-color: #FC0000;
		color: #fff;
		width: 350upx;
		margin: 0 auto;
		height: 90upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 35upx;
		margin-top: 8%;
		font-size: 65upx;
		position: fixed;
		bottom: 10%;
		left: 50%;
		/* 水平居中，先设置左移50%: ; */
		transform: translateX(-50%);
		/* 再根据元素自身宽度调整回来: ; */
		z-index: 1000;
	}

	.li {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5%;
		border-bottom: 1px solid #ccc5c5;
		padding-bottom: 3%;
	}

	.li:nth-last-child(1) {
		border-bottom: 0px solid #ccc5c5;
	}

	.group {
		background-color: #FC0000;
		color: #FFFFFF;
		/* padding: 3%; */
		border-radius: 15upx;
		width: 13%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 10px;
	}

	.right {
		width: 84%;
	}

	.right_top {
		display: flex;
		justify-content: space-between;
	}

	.b {
		font-size: 20upx;
	}

	.zu {
		font-size: 20upx;
	}

	.tui {
		background-color: #FC0000;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 35upx;
		width: 150upx;
		font-size: 25upx;
	}

	.mi {
		color: #3D3D3D;
		font-weight: 600;
	}

	.date {
		color: #BFBEBE;
	}

	.jia {
		margin-top: 1%;
		margin-bottom: 1%;
		font-size: 22rpx;
	}

	.bg {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: #000;
		z-index: 0;
		opacity: 0.5;
		left: 0;
		top: 0;

	}

	.caozuo {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 99;
		background-color: #fff;
		z-index: 9;
		width: 90%;
		border-radius: 20upx;
		display: flex;
		padding: 3.5%;
		height: 80%;
		border: 1px solid #d4d0d0;
	}

	.caozuogroupall {
		width: 100%;
		display: flex;
		/* 	margin: auto; */
	}

	.caozuogroup {
		background-color: #FC0000;
		color: #FFFFFF;
		padding: 3%;
		border-radius: 15rpx;
		width: 25%;
		margin-right: 2%;
		text-align: center;

	}

	.caozuogroupselect {
		background-color: royalblue;
		color: #FFFFFF;
		padding: 3%;
		border-radius: 15rpx;
		width: 25%;
		margin-right: 2%;
		text-align: center;

	}

	.an {
		width: 25%;
		background-color: #FC0000;
		color: #FFFFFF;
		margin-right: 2.5%;
		margin-left: 2.5%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		border-radius: 10upx;
		padding: 3%;
	}

	.txt {
		text-align: center;
	}

	.cao_title {
		text-align: center;
		width: 100%;
		padding-top: 5%;
	}

	.bor {
		width: 95%;
		margin: 0 auto;
		margin-top: 5%;
		border: 1px solid #A5A5A5;
		padding: 3%;
		border-radius: 15upx;
	}

	.ti {
		flex-direction: column;
	}

	.add {
		border: 1px solid #A5A5A5;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 1px;
		border-radius: 25upx;
		font-size: 45upx;
		margin-top: 5%;
	}

	.bor_ing {
		display: flex;
	}

	.bor_ing .left {
		width: 26%;
		color: #3D3D3D;
		font-size: 20upx;
		border: 1px solid #A5A5A5;
		text-align: center;

		border-radius: 15upx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		margin-right: 2%;
	}

	.bor_ing .right {
		width: 70%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.bor_ing .right .li {
		display: flex;
		font-size: 20upx;
		color: #3D3D3D;
		margin-top: 2%;
		margin-bottom: 2%;
		align-items: center;
	}

	.ins {
		width: 40upx;
		border: 1px solid #A5A5A5;
		border-radius: 13upx;
	}

	.jin {
		color: #FF0000;
		font-size: 35upx;
		font-weight: 800;
		text-align: center;
		margin-top: 5%;
	}

	.fa {
		background-color: #FC0000;
		color: #FFFFFF;
		font-size: 35upx;
		font-weight: 800;
		width: 450upx;
		height: 80upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 45upx;
		margin: 0 auto;
		margin-top: 10%;
	}
</style>